import type { FC, ReactNode } from 'react'
import React, { memo, useState } from 'react'
import { ForgetPwdWrapper } from '@/views/forget-pwd/style'
import { Breadcrumb, Steps } from 'antd'
import ConfirmAccount from '@/views/forget-pwd/c-cpns/confirm-account'
import ResetPwd from '@/views/forget-pwd/c-cpns/reset-pwd'
import ResetSuccess from '@/views/forget-pwd/c-cpns/reset-success'

interface IProps {
  children?: ReactNode
}

enum Step {
  ConfirmAccount,
  ResetPwd,
  ResetSuccess
}

const breadCrumbs = [{ title: '登录' }, { title: '忘记密码' }]
const stepTitles = [
  { title: '确认账号' },
  { title: '重置密码' },
  { title: '重置完成' }
]

const ForgetPwd: FC<IProps> = (props) => {
  /** 数据 **/
  const tabs = {
    [Step.ConfirmAccount]: <ConfirmAccount nextStepClick={nextStepClick} />,
    [Step.ResetPwd]: <ResetPwd nextStepClick={nextStepClick} />,
    [Step.ResetSuccess]: <ResetSuccess />
  }
  const [currentStep, setCurrentStep] = useState<Step>(Step.ConfirmAccount)

  /** 回调 **/
  function nextStepClick(step: number) {
    setCurrentStep(step)
  }

  return (
    <ForgetPwdWrapper>
      <div className="steps-wrapper">
        <Breadcrumb items={breadCrumbs} />
        <div className="content">
          <Steps
            className="steps"
            size="small"
            current={currentStep}
            items={stepTitles}
          />
          <div className="tab">{tabs[currentStep]}</div>
        </div>
      </div>
    </ForgetPwdWrapper>
  )
}

export default memo(ForgetPwd)
